<template>
  <div>
    <div>
      <template v-for="(item, index) in tags">
        <el-button
          :type="active === index ? 'primary' : ''"
          :key="index"
          :plain="active !== index"
          @click="active = index"
          >{{ item.label }}
          <span
            class="inline_block rounded ml-1 py-1 px-2 text-xs bg-gray-400 text-white"
            :class="active === index ? '!bg-white !text-gray-700' : ''"
            >{{ item.num }}</span
          ></el-button
        >
        <!-- <el-button type="" plain :key="item" v-else
          >{{ item.label }}
          <span class="inline_block p-1 text-xs bg-gray-400 text-white">{{
            item.num
          }}</span></el-button
        > -->
      </template>
    </div>
    <div class="flex space-x-6 p-4">
      <template v-for="(item, index) in tags2">
        <el-link
          :type="active2 === index ? 'primary' : ''"
          :key="index"
          @click="active2 = index"
          >{{ item }}</el-link
        >
      </template>
    </div>
    <the-list class="border-t" />
    <the-page ref="page" />
  </div>
</template>

<script>
import theList from "@/components/list.vue";
import thePage from "@/components/page";

export default {
  components: { theList, thePage },
  data() {
    return {
      active: 0,
      active2: 0,
      tags: [
        { label: "全部", num: 1234 },
        { label: "公告", num: 12 },
        { label: "资讯", num: 12 },
        { label: "周报", num: 34 },
        { label: "时评", num: 34 },
      ],
      tags2: ["全部主题", "最新", "热门", "精华"],
    };
  },
  mounted() {
    this.$refs.page.total = 100;
  },
};
</script>

<style>
</style>